<template>
    <div>
      <h3>地址页面</h3>

      <p>{{set_address}}</p>
      <table style="width:800px;margin: 0 auto;">
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>手机号</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,i) in set_address" :key="i">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.mobile }}</td>
          <td>{{ item.addss}}</td>
          <td>
            <el-checkbox v-model="item.xz">设置为默认地址</el-checkbox>
            <el-button @click="del(item.id)">删除</el-button>
            <el-button @click="Oneupdate(item)">修改</el-button>
          </td>
        </tr>
      </table>
      <h4>添加</h4>
      <div> 姓名<input type="text" v-model="add_list.name"> </div>
      <div> 手机号<input type="text" v-model="add_list.mobile"> </div>
      <div> 
        地址<input type="text" v-model="add_list.addss"> 
        <!-- <select name="" id="" v-model="addd">
            <option value="河南" >河南</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="天津">天津</option> -->
        <!-- </select> -->
      
      </div>
      <div>  <el-button @click="add">添加</el-button>  </div>
  
  
  
      <h4>修改数据</h4>
      <div> 姓名<input type="text" v-model="update_list.name"> </div>
      <div> 手机号<input type="text" v-model="update_list.mobile"> </div>
      <div> 地址<input type="text" v-model="update_list.addss"> </div>
      <div>  <el-button @click="updater">修改</el-button>  </div>
    </div>
  
  
    
  </template>
  
  <script>
  import axios from 'axios'
  export default {
    data(){
      return{
        set_address:{},
        add_list:{name:'',mobile:'',addss:'',},
        update_list:{},
        xz:false,
        addd:''
      }
    },
    mounted(){
      this.getAddress()
    },
    methods:{
      Oneupdate(item){
        this.update_list={...item}
      },
      updater(){
        axios.put('http://127.0.0.1:8000/users/updated/'+this.update_list.id+'/',this.update_list)
        .then(resp=>{
          console.log(resp);
          if(resp.data.code == 200){
            alert(resp.data.msg)
          }else{
            alert('修改失败')
          }
        })
        .catch(err=>{
          console.log(err);
        })
        
      },
      getAddress(){
        axios.get('http://127.0.0.1:8000/users/addres/',this.set_address)
        .then(resp=>{
          console.log(resp);
          this.set_address=resp.data
        })
        .catch(err=>{
          console.log(err);
        })
  
      },
      del(i){
        axios.delete('http://127.0.0.1:8000/users/updated/'+i+'/')
        .then(resp=>{
          console.log(resp);
          if(resp.data.code == 200){
            alert(resp.data.msg)
          }else{
            alert('删除失败')
          }
        })
        .catch(err=>{
          console.log(err);
        })
  
      },
      add(){
        axios.post('http://127.0.0.1:8000/users/addres/',this.add_list)
        .then(resp=>{
          console.log(resp);
          if (resp.data.code == 200){
            alert(resp.data.msg)
          }else{
            alert('添加失败')
          }
        })
      }
    }
  }
  </script>
  
  <style>
  
  </style>